<template>
    <div 
        id="SumInformation"
        :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2, 'height':myHeight }">
        
        <div class="sum_bottom">
            <el-col :span="8" class="sum_bottom_item">
                <div class="top">
                    新生总人数
                </div>
                <div class="sum_bottom_main">
                    <span style="font-size: 3rem;line-height: 150px;"> {{basicNum.totalNumber}}</span>
                    <div style="    float: right;margin-top: 25px;margin-right: 25px;">
                        <svg t="1669302532093" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766"
                            width="100" height="100">
                            <path d="M629.3 906.1H394.7l-77.9-74c23.4-89.3 83.4-130.1 83.4-130.1h223.7s59.9 40.8 83.4 130.1l-78 74z"
                                fill="#8ADCFF" p-id="6767"></path>
                            <path d="M549.3 735.6L538.5 764l-1.8 4.6-7.4 19.5h-37.6l-20-52.5z" fill="#A6B7BF" p-id="6768"></path>
                            <path d="M529.3 788.1h-37.6l-20 118h77.6zM549.3 735.6L538.5 764l-1.8 4.6-7.4 19.5h-15l10.2-26.8 3.8-10 6-15.7z"
                                fill="#889CA9" p-id="6769"></path>
                            <path d="M549.3 906.1h-15l-20-118h15z" fill="#73859E" p-id="6770"></path>
                            <path
                                d="M677.2 832.1C653.8 742.8 593.9 702 593.9 702h30s59.9 40.8 83.4 130.1h-30.1zM464.5 768.8c-9 2-19-1-25.3-9.2l-46.4-60.4 12.8 2.3 44.6 58.1c3.8 5 8.8 8 14.3 9.2zM548.5 768.8c-3.9 0.9-7.9 0.8-11.8-0.2l1.8-4.6c3 2.4 6.4 4 10 4.8z"
                                fill="#46CDFB" p-id="6771"></path>
                            <path
                                d="M538.5 764l-1.8 4.6c-4.5-1.2-8.8-3.6-12.2-7.4-0.7-0.8-1.4-1.7-2.1-2.6l-16-23 5.5-7.9 5.5 7.9 10.9 15.7 5.1 7.4c1.5 2.1 3.2 3.9 5.1 5.3z"
                                fill="#889CA9" p-id="6772"></path>
                            <path d="M394.7 827.1v79h-87.2c0-27.6 3.5-57.2 9.3-79h77.9zM716.5 906.1h-87.2v-79h77.9c5.7 21.8 9.3 51.4 9.3 79z"
                                fill="#FFECE3" p-id="6773"></path>
                            <path d="M364.7 827.1h30v79h-30zM716.5 906.1h-30c0-27.6-3.5-57.2-9.3-79h30c5.8 21.8 9.3 51.4 9.3 79z" fill="#F7DBD0"
                                p-id="6774"></path>
                            <path d="M517.3 720.1l-26.8 38.6c-9.6 13.9-30 14.4-40.3 1l-46.4-60.4 113.5 20.8z" fill="#FFFFFF" p-id="6775"></path>
                            <path d="M506.7 720.1l26.8 38.6c9.6 13.9 30 14.4 40.3 1l46.4-60.4-113.5 20.8z" fill="#FFFFFF" p-id="6776"></path>
                            <path d="M507.3 720l-0.3 0.5-0.3-0.5h0.3z" fill="#EFEAEB" p-id="6777"></path>
                            <path
                                d="M507.3 720l-0.3 0.5-0.3-0.5h0.3zM620.2 699.3l-46.4 60.4c-6.2 8-15.9 11.1-24.8 9.2 5.6-1.1 10.9-4.2 14.8-9.2l44.7-58.3 11.7-2.1z"
                                fill="#EFEAEB" p-id="6778"></path>
                            <path d="M507.3 720l-0.3 0.5-0.3-0.5h0.3z" fill="#EFEAEB" p-id="6779"></path>
                            <path
                                d="M507.3 720l-0.3 0.5-0.3-0.5h0.3zM512 727.7l-5 7.2-16.5 23.8c-6 8.7-16.2 12.1-25.5 10.2 6-1.2 11.6-4.6 15.5-10.2l21.5-31 5-7.2 5 7.2z"
                                fill="#EFEAEB" p-id="6780"></path>
                            <path d="M249.7 470.5m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z" fill="#F7DBD0" p-id="6781"></path>
                            <path d="M774.3 470.5m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z" fill="#F7DBD0" p-id="6782"></path>
                            <path d="M512 459.5m-269.3 0a269.3 269.3 0 1 0 538.6 0 269.3 269.3 0 1 0-538.6 0Z" fill="#FFECE3" p-id="6783">
                            </path>
                            <path
                                d="M781.3 459.5c0 148.7-120.6 269.3-269.3 269.3-8.4 0-16.8-0.4-25-1.2C624 715 731.3 599.8 731.3 459.4S624 204 487 191.3c8.2-0.8 16.6-1.1 25-1.1 148.7 0 269.3 120.6 269.3 269.3z"
                                fill="#F7DBD0" p-id="6784"></path>
                            <path
                                d="M256 544.8c11.9 32.9 30 63 52.9 88.8-22.9-25.8-41-55.8-52.9-88.8zM317 642.4c-1.9-1.9-3.7-3.8-5.5-5.8 1.8 1.9 3.7 3.9 5.5 5.8zM332.4 657.1c-2.3-2.1-4.7-4.2-6.9-6.4 2.3 2.2 4.6 4.3 6.9 6.4z"
                                fill="#FFD8D2" p-id="6785"></path>
                            <path d="M292.8 571.9a59.1 47.1 0 1 0 118.2 0 59.1 47.1 0 1 0-118.2 0Z" fill="#F9CFDA" p-id="6786"></path>
                            <path d="M613 571.9a59.1 47.1 0 1 0 118.2 0 59.1 47.1 0 1 0-118.2 0Z" fill="#F9CFDA" p-id="6787"></path>
                            <path
                                d="M436.3 526.3c-7 0-12.7-5.7-12.7-12.7v-10.2c0-7 5.7-12.7 12.7-12.7 7 0 12.7 5.7 12.7 12.7v10.2c0 7.1-5.7 12.7-12.7 12.7zM587.7 526.3c-7 0-12.7-5.7-12.7-12.7v-10.2c0-7 5.7-12.7 12.7-12.7 7 0 12.7 5.7 12.7 12.7v10.2c0 7.1-5.7 12.7-12.7 12.7zM512 597.7c-16.4 0-31.9-7.1-42.7-19.4-4.6-5.3-4-13.3 1.2-17.9 5.3-4.6 13.3-4 17.9 1.2 6 6.8 14.6 10.8 23.6 10.8 9 0 17.6-3.9 23.6-10.7 4.6-5.3 12.6-5.8 17.9-1.2 5.3 4.6 5.8 12.6 1.2 17.9-10.8 12.2-26.3 19.3-42.7 19.3z"
                                fill="#73859E" p-id="6788"></path>
                            <path
                                d="M812.6 394c-4.1 0.1-8.3 0.2-12.4 0.2-83.8 0-162.2-23.1-229.1-63.4-69.3 44.5-151.8 70.4-240.4 70.4-40.9 0-80.6-5.5-118.3-15.9 11-87.8 60.1-164.1 130.1-211.9C390.9 140.3 449.3 121 512 121s121 19.4 169.4 52.4c15.7 10.7 30.4 22.9 43.8 36.3 48.4 48.3 80.5 112.7 87.4 184.3z"
                                fill="#BD9EE2" p-id="6789"></path>
                            <path
                                d="M812.6 394c-4.1 0.1-8.3 0.2-12.4 0.2-12.7 0-25.3-0.5-37.7-1.6-7.2-71-39.2-134.9-87.2-182.9-13.4-13.4-28.1-25.6-43.8-36.3-41.9-28.6-91.3-46.9-144.5-51.3 8.2-0.7 16.6-1 25-1 62.7 0 121 19.4 169.4 52.4 15.7 10.7 30.4 22.9 43.8 36.3 48.4 48.2 80.5 112.6 87.4 184.2z"
                                fill="#978CDB" p-id="6790"></path>
                        </svg>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" class="sum_bottom_item">
                <div class="top">
                    已报道人数
                </div>
                <div class="sum_bottom_main">
                    <span style="font-size: 3rem;line-height: 150px;"> {{basicNum.checkNumber}}</span>
                    <span style="    position: absolute;bottom: 5px;left: 50px;">待报道人数：{{basicNum.totalNumber-basicNum.checkNumber}} &nbsp;&nbsp;&nbsp;&nbsp;较上日：{{ arriveNum_data[6] - arriveNum_data[5] }} <i class="el-icon-top" style="color: #409eff;font-weight: 700;"></i></span>
                    <div style="    float: right;margin-top: 25px;margin-right: 25px;">
                        <svg t="1669303476561" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9617"
                            width="100" height="100">
                            <path d="M217.19461 155.378673h496.355044v372.266283H217.19461z" fill="#FFC824" p-id="9618"></path>
                            <path
                                d="M868.660605 248.445244h-124.088761V155.378673a31.02219 31.02219 0 0 0-31.02219-31.02219H304.677186A93.066571 93.066571 0 0 0 310.26118 93.334292a93.066571 93.066571 0 1 0-124.088761 87.482577V992.97781a31.02219 31.02219 0 0 0 62.044381 0V558.667146h155.110951v93.066571a50.255948 50.255948 0 0 0 0 5.894216 44.05151 44.05151 0 0 0 0 6.204438 25.748418 25.748418 0 0 0 5.894216 8.375991 10.547545 10.547545 0 0 0 1.861332 1.861332 33.193744 33.193744 0 0 0 6.824882 4.653328h2.791997A31.02219 31.02219 0 0 0 434.349941 682.755907h434.310664a31.02219 31.02219 0 0 0 31.02219-31.02219V279.467434a31.02219 31.02219 0 0 0-31.02219-31.02219zM217.19461 62.312102a31.02219 31.02219 0 1 1-31.022191 31.02219 31.02219 31.02219 0 0 1 31.022191-31.02219z m31.02219 124.088761h434.310663v310.221903H248.2168z m319.218338 372.266283L465.372132 603.959544V558.667146zM837.638415 620.711527h-257.173958l145.804295-64.836378 3.412441-2.171553a46.223063 46.223063 0 0 0 6.204438-4.653329 24.197308 24.197308 0 0 0 3.102219-4.653328 23.266643 23.266643 0 0 0 3.102219-5.273773 19.854202 19.854202 0 0 0 0-7.445325A15.511095 15.511095 0 0 0 744.571844 527.644956v-217.155332h93.066571z"
                                fill="#6B400D" p-id="9619"></path>
                        </svg>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" class="sum_bottom_item">
                <div class="top">
                    已缴费人数
                </div>
                <div class="sum_bottom_main">
                    <span style="font-size: 3rem;line-height: 150px;"> {{basicNum.payNumber}}</span>
                    <span style="    position: absolute;bottom: 5px;left: 50px;">待缴费人数：{{basicNum.totalNumber-basicNum.payNumber}} &nbsp;&nbsp;&nbsp;&nbsp;较上日：<i class="el-icon-top" style="color: #409eff;font-weight: 700;"></i></span>
                    <div style="    float: right;margin-top: 25px;margin-right: 25px;">
                        <svg t="1669303078729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="8515" width="100" height="100">
                            <path
                                d="M753.1 960.4H201.8c-40.6 0-73.8-33.2-73.8-73.8V138.2c0-40.6 33.2-73.8 73.8-73.8h551.3c40.6 0 73.8 33.2 73.8 73.8v748.5c0 40.5-33.2 73.7-73.8 73.7z"
                                fill="#E5ECFF" p-id="8516"></path>
                            <path d="M826.9 225.7v-66.6c0-37.3-30.5-67.8-67.8-67.8H195.9c-37.3 0-67.8 30.5-67.8 67.8v66.6h698.8z"
                                fill="#83A4FF" p-id="8517"></path>
                            <path d="M826.9 198.8v-66.6c0-37.3-30.5-67.8-67.8-67.8H195.9c-37.3 0-67.8 30.5-67.8 67.8v66.6h698.8z"
                                fill="#5B79FB" p-id="8518"></path>
                            <path d="M217.6 324.2h259.8V369H217.6z" fill="#83A4FF" p-id="8519"></path>
                            <path d="M217.6 431.8h439v44.8h-439z" fill="#C7D8FF" p-id="8520"></path>
                            <path d="M217.6 539.3h259.8v44.8H217.6z" fill="#83A4FF" p-id="8521"></path>
                            <path d="M217.6 646.8h439v44.8h-439z" fill="#C7D8FF" p-id="8522"></path>
                            <path
                                d="M244.5 826v66.6c0 31.5-21.8 58.1-51.1 65.6 5.9 1.4 12 2.2 18.4 2.2h621c41.1 0 74.8-30.5 74.8-67.8V826H244.5z"
                                fill="#5B79FB" p-id="8523"></path>
                            <path
                                d="M754.1 225.7c3.6 8.2 5.6 17.3 5.6 26.9 0 37.1-30.1 67.2-67.2 67.2s-67.2-30.1-67.2-67.2c0-9.6 2-18.6 5.6-26.9h-28.6c-2.5 8.5-4 17.5-4 26.9 0 51.9 42.2 94.1 94.1 94.1 51.9 0 94.1-42.2 94.1-94.1 0-9.3-1.4-18.4-4-26.9h-28.4z"
                                fill="#FF7E71" p-id="8524"></path>
                            <path d="M240 131.6m-22.4 0a22.4 22.4 0 1 0 44.8 0 22.4 22.4 0 1 0-44.8 0Z" fill="#FFFFFF" p-id="8525"></path>
                            <path d="M338.6 131.6m-22.4 0a22.4 22.4 0 1 0 44.8 0 22.4 22.4 0 1 0-44.8 0Z" fill="#FFFFFF" p-id="8526"></path>
                            <path d="M437.2 131.6m-22.4 0a22.4 22.4 0 1 0 44.8 0 22.4 22.4 0 1 0-44.8 0Z" fill="#FFFFFF" p-id="8527"></path>
                        </svg>
                    </div>
                </div>
            </el-col>
        </div>

        <div class="sum_main">
            <div class="top">7日报道人数趋势图</div>
            <div class="sum_main_chart"></div>
        </div>

        <div class="sum_top">
                <el-col :span="8" class="sum_top_item">
                    <div class="top">
                        男女分布
                    </div>
                    <div class="sum_top_chart"></div>
                </el-col>
                <el-col :span="8" class="sum_top_item">
                    <div class="top">
                        新生概况
                    </div>
                    <div class="sum_top_chart"></div>
                </el-col>
                <el-col :span="8" class="sum_top_item">
                    <div class="top">
                        新生基本信息
                    </div>
                    <div class="sum_top_chart"></div>
                </el-col>
        </div>
        
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            basicNum:{
                totalNumber: 0,
                maleNumber: 0,
                femaleNumber: 0,
                payNumber: 0,
                allocatedNumber:0,
                checkNumber:10,
            },

            myHeight: "",
            myWidth1: "",//未展开的宽度
            myWidth2: "",//展开了的宽度

            myChart_arriveNum: null,//7天报道人数折线图
            arriveNum_data: [],

            myChart_maxCollegeNum: null,//男女分布
            maxCollegeNum_data: [[],[]],

            mychart_sexNum: null,//打印性别比例柱状图
            sexNum_data:[],

            mychart_basicNum:null,//打印学院基本信息图
            basic_data:[],
        }
    },
    props: {
        isCollapse: true,
        userdetail: {},
        studentdetail: {},
    },
    methods:{
        //打印学院基本信息图
        getBasicNumChart(id){
            var chartDom = document.getElementsByClassName(id)[2];

            if (this.mychart_basicNum != null) {
                this.mychart_basicNum.dispose();
            }
            this.mychart_basicNum = this.$echarts.init(chartDom);
            var option;

            option = {
                polar: {
                    radius: [30, '80%']
                },
                angleAxis: {
                    max: 20,
                    startAngle: 75
                },
                radiusAxis: {
                    type: 'category',
                },
                tooltip: {},
                series: {
                    type: 'bar',
                    data: this.basic_data,
                    coordinateSystem: 'polar',
                    label: {
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}'
                    }
                }
            };

            option && this.mychart_basicNum.setOption(option);

        },
        //打印性别比例柱状图方法
        getSexChart(id){
            var chartDom = document.getElementsByClassName(id)[1];
            if (this.mychart_sexNum != null) {
                this.mychart_sexNum.dispose();
            }
            this.mychart_sexNum = this.$echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ["计信","理学院","电气","水环","经管"],
                    axisLabel: {
                        formatter: function (value) {
                            if (value.length > 2) {
                                return `${value.slice(0, 2)}...`;
                            }
                            return value;
                        }
                    }
                },
                series: [
                    {
                        name: '男',
                        type: 'bar',
                        data: [18203, 23489, 29034, 104970, 131744]
                    },
                    {
                        name: '女',
                        type: 'bar',
                        data: [19325, 23438, 31000, 121594, 134141]
                    }
                ]
            };

            option && this.mychart_sexNum.setOption(option);
        },
        // 7天报道人数折线图
        getArriveNumChart(id){
            var chartDom = document.getElementsByClassName(id)[0];
            if(this.myChart_arriveNum!=null){
                this.myChart_arriveNum.dispose();
            }
            this.myChart_arriveNum = this.$echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: this.getNowTime()
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.arriveNum_data,
                        type: 'line',
                        label: {
                            show: false,
                            position: "top",
                            textStyle: {
                                fontSize: 20,
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    },
                ]
            };
            // console.log("执行了");
            option && this.myChart_arriveNum.setOption(option);
        },
        //男女分布
        getMaxCollegeNum(id) {
            var chartDom = document.getElementsByClassName(id)[0];
            if (this.myChart_maxCollegeNum != null) {
                this.myChart_maxCollegeNum.dispose();
            }
            this.myChart_maxCollegeNum = this.$echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: this.maxCollegeNum_data[1],
                    axisLabel:{
                        formatter: function (value) {
                            if (value.length >2) {
                                return `${value.slice(0, 2)}...`;
                            }
                            return value;
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.maxCollegeNum_data[0],
                        type: 'bar',
                        label: {
                            show: false,
                            position: "top",
                            textStyle: {
                                fontSize: 15,
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                    }
                ],
                grid: [
                    {
                        bottom:"15%",
                        top:"15%"
                    }
                ]
            };

            option && this.myChart_maxCollegeNum.setOption(option);
        },
        //获取近七天时间
        getNowTime() {
            var date = new Date();
            var year = date.getFullYear();  
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var time=[];
            for(var i=0;i<7;i++){
                time.push(year + '-' + this.addZero(month) + '-' + this.addZero(day-i));
            }
             
            return time;
        },
        //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        }
    },
    created(){
        //初始化界面大小
        this.myHeight = window.innerHeight - 40 - 40 - 20 + "px";
        this.myWidth1 = window.innerWidth - 64 - 30 + "px"
        this.myWidth2 = window.innerWidth - 200 - 30 + "px"
    },
    mounted(){
        var _this=this;
        //打印近七天报道人数折线图
        this.arriveNum_data = [10, 20, 40, 22, 51, 10, 31];
        this.getArriveNumChart("sum_main_chart");
        

        


        axios({
            method: "post",
            url: "api/users/getStatistic"
        }).then(function (resp) {
            _this.basicNum = resp.data.data;
            _this.basicNum.checkNumber=10;
            _this.basic_data = [{
                name: '已安排宿舍人数',
                value: _this.basicNum.allocatedNumber
            }, {
                name: '已缴费人数',
                value: _this.basicNum.payNumber
            }, {
                name: '男生人数',
                value: _this.basicNum.maleNumber
            }, {
                name: '女生人数',
                value: _this.basicNum.femaleNumber
            }, {
                name: '以报道人数',
                value: _this.basicNum.checkNumber
            },]
            


            //打印男女分布
            _this.maxCollegeNum_data[0].push(_this.basicNum.maleNumber + _this.basicNum.femaleNumber);
            _this.maxCollegeNum_data[0].push(_this.basicNum.maleNumber);
            _this.maxCollegeNum_data[0].push(_this.basicNum.femaleNumber);
            _this.maxCollegeNum_data[1] = ["总","男", "女"];//学院
            
            //性别分布柱状图
            _this.getMaxCollegeNum("sum_top_chart");


            _this.getBasicNumChart("sum_top_chart");

            //学院 性别 水平柱状图
            _this.getSexChart("sum_top_chart");
        })
        
        

    },
    watch:{
        isCollapse(newVal, oldVal){
            var _this=this;
            setTimeout(function () { 
                _this.getArriveNumChart("sum_main_chart");
                _this.getMaxCollegeNum("sum_top_chart");
                _this.getBasicNumChart("sum_top_chart");
                _this.getSexChart("sum_top_chart");
            }, 700) 
        }
    }
}
</script>

<style scoped>
#SumInformation{
    overflow: auto;
    float:left;
    margin-top: 10px;
}
.sum_top{
    width: 100%;
    height: 400px;
    margin-top: 10px;
}
.sum_top_item{
    height: 100%;
    padding-left: 2%;
    padding-right: 2%;
}
.sum_main{
    width: 100%;
    height: 400px;
    margin-top: 20px;
    background-color: #ffffff;
}

.sum_main_chart{
    width: 100%;
    height: 350px;
}
.top{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
    background-color: #ffffff;
    text-align: center;
}
.sum_top_chart{
    height: 350px;
    width: 100%;
    background-color: #ffffff;
}
.sum_bottom{
    height: 200px;
}
.sum_bottom_item{
    padding-left: 2%;
    padding-right: 2%;
}
.sum_bottom_main{
    height: 150px;
    position: relative;
    background-color: #ffffff;
}
</style>